<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.3.1.js" type="text/javascript"></script>
<style type="text/css">
body {
  position: relative;
  margin: 0;
  padding: 0;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 9pt;
  color: #000;
}
.border {
  float: left;
  margin: 10px 0 0 5px;
}
label {
  padding-left: 5px;
}
select {
  width: 130px;
  font-family: Georgia, Times, "Times New Roman", serif;
  font-size: 9pt;
  color: #000;
}
</style>
<script type="text/javascript">
(function($){
  // очищаем select
  $.fn.clearSelect = function() {
	  return this.each(function(){
		  if(this.tagName=='SELECT') {
		      this.options.length = 0;
		      $(this).attr('disabled','disabled');
		  }
	  });
  }
  // заполняем select
  $.fn.fillSelect = function(dataArray) {
	  return this.clearSelect().each(function(){
		  if(this.tagName=='SELECT') {
			  var currentSelect = this;
			  $.each(dataArray,function(index,data){
				  var option = new Option(data.text,data.value);
				  if($.support.cssFloat) {
					  currentSelect.add(option,null);
				  } else {
					  currentSelect.add(option);
				  }
			  });
		  }
	  });
  }
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){

  // выбор автомобиля
  function adjustAuto(){
  	var countryValue = $('#country').val();
  	var tmpSelect = $('#auto');
  	if(countryValue.length == 0) {
  		tmpSelect.attr('disabled','disabled');
  		tmpSelect.clearSelect();
  		adjustModel();
  	} else {
  		$.getJSON('cascadeSelectAuto.php',{country:countryValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); adjustModel(); });
  		
  	}
  };
  // выбор модели
  function adjustModel(){
  	var countryValue = $('#country').val();
  	var autoValue = $('#auto').val();
  	var tmpSelect = $('#model');
  	if(countryValue.length == 0||autoValue.length == 0) {
  		tmpSelect.attr('disabled','disabled');
  		tmpSelect.clearSelect();
  	} else {
  		$.getJSON('cascadeSelectModel.php',{country:countryValue,auto:autoValue},function(data) { tmpSelect.fillSelect(data).attr('disabled',''); });
  	}
  };
	
  $('#country').change(function(){
  	adjustAuto();
  }).change();
  $('#auto').change(adjustModel);
  $('#model').change(function(){
  	if($(this).val().length != 0) { alert('Выбор сделан!'); }
  });

});
</script>
</head>
<body>
  <div class="border">
  <label>Страна</label><br />
  <select id="country">
    <option value="">Выбрать страну</option>
    <option value="1">Германия</option>
    <option value="2">Ю.Корея</option>
    <option value="3">Япония</option>
  </select>
  </div>
  <div class="border">
  <label>Автомобиль</label><br />
  <select id="auto" disabled="disabled"></select>
  </div>
  <div class="border">
  <label>Модель</label><br />
  <select id="model" disabled="disabled"></select>
  </div>
</body>
</html>